<template>
  <div class="container">
    <el-card class="box-card">
      <el-breadcrumb
        separator="/"
        v-if="this.$route.query.id != null"
        class="navigation"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ this.Query.subjectID }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <hr v-if="this.$route.query.id != null" class="p_line" />
      <!-- 第二行 -->
      <!-- <el-row class="second-row"> -->
      <el-form label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="目录名称">
              <el-input
                v-model="Query.directoryName"
                class="demo-input"
                placeholder="请输入内容"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="4"
            ><el-form-item label="状态">
              <el-select
                v-model="Query.state"
                class="demo-sel"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button @click="clearSel">清除</el-button>
              <el-button type="primary" @click="getCataloglist">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="11"
            ><el-form-item>
              <a
                v-if="this.$route.query.id != null"
                class="el-icon-back demo-icon"
                @click="goBack()"
                >返回学科</a
              >
              <el-button type="success" class="demo-button" @click="getSubjects"
                >新增目录</el-button
              >
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
      <!-- 第三行 -->
      <el-alert
        :title="`数据一共有${counts}条`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 表格行 -->
      <template>
        <el-table style="width: 100%" :data="cataloglist">
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">{{
              scope.row.addDate | parseTimeByString
            }}</template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.state==1 ? "已禁用" : "已启用" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                class="demo-btn demo-btn-1"
                @click="resState(scope.row)"
                >{{ scope.row.state==1 ? "启用" : "禁用" }}</el-button
              >
              <el-button
                size="mini"
                type="text"
                class="demo-btn"
                :disabled="scope.row.state==1 ? false : true"
                @click="showEditDialog(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                class="demo-btn"
                type="text"
                :disabled="
                  scope.row.state == 0 || $route.query.id != null ? true : false"
                @click="removeCatalog(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页区域 -->
      <el-row type="flex" justify="end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Query.page"
          :page-sizes="[2, 4, 6, 10]"
          :page-size="Query.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          background
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 新增弹出层 -->
    <el-dialog
      title="新增目录"
      :visible.sync="addDialogVisible"
      width="30%"
      @closed="$refs.addFormRef.resetFields()"
    >
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item  label="所属学科" v-show="addFormSelShow" prop="subjectName" >
          <el-select v-model="addForm.subjectID"  placeholder="请选择学科">
            <el-option
              v-for="(value, index) in cataloglist"
              :key="index"
              :label="value.subjectName"
              :value="value.subjectID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="addForm.directoryName" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>

      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addCatalog">确 定</el-button>
    </el-dialog>
    <!-- 修改弹出层 -->
    <el-dialog
      title="修改目录"
      :visible.sync="editDialogVisible"
      width="30%"
      @closed="$refs.editFormRef.resetFields()"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
      >
        <el-form-item label="所属学科" prop="subjectName" v-show="addFormSelShow">
          <el-select v-model="editForm.subjectID" value="editForm.subjectName">
            <el-option
              v-for="(value, index) in cataloglist"
              :key="index"
              :label="value.subjectName"
              :value="value.subjectID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="editForm.directoryName" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>

      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editCatalog()">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { status } from "@/api/hmmm/constants.js";
import {
  list,
  add,
  changeState,
  update,
  remove,
  detail,
} from "@/api/hmmm/directorys.js";
import { simple } from "@/api/hmmm/subjects.js";
import { parseTimeByString } from "@/filters";
export default {
  name: "query",
  data() {
    return {
      Query: {
        pagesize: 10,
        page: 1,
        subjectID: null,
        directoryName: null,
        state: null,
      },
      counts: 0,
      cataloglist: [],
      // 新增用户参数
      addForm: {
        directoryName: "",
        subjectID: "",
        subjectName: "",
      },
      addFormSelShow: true, //修改和添加表单的下拉框是否显示
      anotherSubjectName: "",
      subjectData: [],
      addDialogVisible: false,
      editDialogVisible: false,
      addFormRules: {
        subjectID: [
          { required: true, message: "请输入目录名称", trigger: "change" },
        ],
        directoryName: [
          { required: true, message: "请输入学科", trigger: "blur" },
        ],
      },
      // 修改用户参数
      editForm: {
        directoryName: "",
        subjectID: "",
        subjectName: "",
      },
      editFormRules: {
        subjectID: [
          { required: true, message: "请输入目录名称", trigger: "change" },
        ],
        directoryName: [
          { required: true, message: "请输入学科", trigger: "blur" },
        ],
      },
      // 通用常量
      status,
    };
  },
  created() {
    this.getCataloglist();
  },
  mounted() {
    this.Query.subjectID = this.$route.query.id;
    this.anotherSubjectName = this.$route.query.name;
    if (this.Query.subjectID == undefined) {
      this.addFormSelShow = true;
    } else {
      this.addFormSelShow = false;
    }
    this.getCataloglist(this.Query.subjectID);
  },
  methods: {
    async getCataloglist() {
      const { data } = await list(this.Query);
      // this.Query = data
      // data.page = this.Query.page
      // data.pagesize = this.Query.pagesize
      this.counts = data.counts;
      this.cataloglist = data.items;
    },
    handleSizeChange(val) {
      this.Query.pagesize = val;
      // 重新获取数据
      this.getCataloglist();
    },
    handleCurrentChange(val) {
      this.Query.page = val;
      this.getCataloglist();
    },
    // 获取用户状态
    async getState() {
      await changeState({
        id: id,
        state: this.Query.state,
      });
    },
    clearSel() {
      this.Query.state = null;
      this.Query.directoryName = null;
      this.getCataloglist();
    },
    // 获取目录简单学科列表
    async getSubjects() {
      const { data } = await simple();
      // const { data } = await list();
      this.subjectData = data;
      // console.log(data,2);
      this.addDialogVisible = true;
    },
    // 添加目录列表
    addCatalog() {
      this.$refs.addFormRef.validate(async (vali) => {
        if (!vali) return;
        await add(this.addForm);
        this.addDialogVisible = false;
        this.getCataloglist();
      });
    },
    // 返回学科
    // getBack() {
    //   this.$router.push("/subjects/list");
    // },
    // 更换禁用
    async resState(row) {
      if (row.state == 1) {
        row.state = 0;
      } else {
        row.state = 1;
      }
      const { data } = await changeState({
        id: row.id,
        state: row.state,
      });
      this.getCataloglist();
    },
    // 修改目录
    async showEditDialog(row) {
      // console.log(id)
      const { data } = await detail(row);
      this.editForm = data;
      this.editDialogVisible = true;
    },
    async editCatalog() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起修改用户信息的数据请求
        const { data } = await update(this.editForm);
        this.editDialogVisible = false;
        this.getCataloglist();
      });
    },
    // 删除目录
    async removeCatalog(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      const { data } = await remove(row);
      this.getCataloglist();
    },
    // 返回学科
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang='less'>
.container {
  min-width: 1366px;
  margin-bottom: 15px;
  .box-card {
    margin: 3px 1px;
    .navigation {
      height: 25px;
      line-height: 25px;
    }
    .demo-input {
      width: 235px;
    }
    .text-name {
      margin: 0 20px;
      font-weight: 700;
    }
    .text-name-two {
      margin: 0 20px 0 40px;
      font-weight: 700;
    }
    .demo-sel {
      margin-right: 10px;
    }
    .demo-button,
    .demo-icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .demo-icon {
      color: #46a9ff;
      top: 10px;
      right: 110px;
    }
    .demo-icon:hover {
      text-decoration: underline;
    }

    .demo-btn {
      border: none;
    }
    .demo-btn-1 {
      color: #46a9ff;
    }
    /deep/.el-alert--info {
      margin-bottom: 15px;
    }
    .p_line {
      background-color: #ebeef5;
      height: 1px;
      border: none;
    }
  }
}
</style>
